<template>
  <view class="mine">
    <view class="mine-header">
      <view class="mine-header_bg">
        <image class="mine-header_bg--image" src="@/static/images/mine/mine-bg3.png" />
      </view>
      <view class="mine-header_content">
        <view class="header-content_top">
          <!-- #ifdef APP-PLUS -->
          <view class="status_bar">
            <view class="top_view"></view>
          </view>
          <!-- #endif -->
          <view class="header-content_top--name u-flex u-row-right">
            <!-- <text class="header-content_top--name__text">{{i18n.my}}</text> -->
            <view class="header-content_top--name__setting"
                  @click="$goPage('/mine/setting')" v-if="userType != 1">
              <i class="icon icon-shezhi"></i>
            </view>
          </view>
        </view>
        <view class="header-content_user">
          <view>
            <u-image width="160rpx" height="160rpx"
                     border-radius="160rpx" style="border:5rpx solid #fff"
                     :src="avatar == '' ? '../../static/images/avatar.jpg': avatar"
                     @click="$goPage('/mine/info')">
            </u-image>
          </view>
          <view class='header-content_user--name u-m-l-46'>
            <view class="header-content_user--name__text u-flex">
              <text class="u-m-r-16" @click="$goPage('/mine/info')">{{uname}}</text>
              <image :src="'../../static/images/grade/'+score+'.png'" style="width:50rpx;height:50rpx;margin-top:-10rpx" @click="gradeModalShow = true"></image>
            </view>
            <view @click="$goPage('/mine/score-rule')">{{$t('mine.current_score')}}：<span class="u-font-32 u-m-r-10" style="font-weight:700">{{achievement.score}}</span> / {{achievement.upScore}} <u-icon name="arrow-right" class="u-m-l-16"></u-icon></view>
            <u-line-progress class="u-m-t-4 u-m-t-6" active-color="#0089FF" height="20" :percent="70" style="width: 350rpx" @click="$goPage('/mine/score-rule')">
              <view class="slot-content">
                {{ achievement.score }}
              </view>
            </u-line-progress>
            <!-- <text class="icon icon-bianji1" @click="$goPage('/mine/info')"></text> -->
          </view>
        </view>
      </view>
    </view>
    <scroll-view scroll-x style="white-space:nowrap;position:relative;border-top-left-radius: 30rpx;
		border-top-right-radius: 34rpx;background-color: #fff;margin-bottom: 20rpx" @scroll="scrollNav">
      <view class="mine-nav">
        <view class="mine-nav-item" @click="$goPage('/article', {type: 'mine'})">
          <text class="num">{{achievement.topicCount}}</text>
          <label class="label">{{$t('mine.my_post') }}</label>
        </view>
        <view class="mine-nav-item" @click="$goPage('/mine/attention')">
          <text class="num">{{  achievement.followCount }}</text>
          <label class="label">{{ $t('mine.attention') }}</label>
        </view>
        <view class="mine-nav-item" @click="$goPage('/mine/fans')">
          <text class="num">{{  achievement.fansCount }}</text>
          <label class="label">{{ $t('mine.fans')}} </label>
        </view>
        <view class="mine-nav-item" @click="$goPage('/mine/collection')">
          <text class="num">{{achievement.favoritesCount}}</text>
          <label class="label">{{$t('mine.collection')  }}</label>
        </view>
        <view class="mine-nav-item"  @click="$goPage('/mine/reply')">
          <text class="num">{{  achievement.replyCount }}</text>
          <label class="label">{{$t('mine.comment')  }}</label>
        </view>
        <view class="mine-nav-item" @click="likeModalShow = true">
          <text class="num">{{ achievement.getLike  }}</text>
          <label class="label">{{ $t('mine.get_like') }}</label>
        </view>
      </view>
    </scroll-view>
    <view class="mine-cell_group">
      <template v-if="userType != 1">
        <view class="mine-cell_item u-flex" @click="$goPage('/mine/info')">
          <view class="mine-cell_icon">
            <image class="mine-cell_icon_image" src="@/static/images/mine/mine-message.png"></image>
          </view>
          <view class="mine-cell_content u-flex u-flex-1 u-border-bottom">
            <view class="mine-cell_content--label u-flex-1">{{$t('mine.my_info')}}</view>
            <text class="icon icon-arrow-r"></text>
          </view>
        </view>
        <view class="mine-cell_item u-flex" @click="$goPage('/demand')">
          <view class="mine-cell_icon">
            <image class="mine-cell_icon_image" src="@/static/images/mine/mine-demand.png"></image>
          </view>
          <view class="mine-cell_content u-flex u-flex-1 u-border-bottom">
            <view class="mine-cell_content--label u-flex-1">{{$t('mine.my_demand')}}</view>
            <text class="icon icon-arrow-r"></text>
          </view>
        </view>
        <view class="mine-cell_item u-flex" @click="$goPage('/mine/repair',{clientType:2})">
          <view class="mine-cell_icon">
            <image class="mine-cell_icon_image" src="@/static/images/mine/mine-repair.png"></image>
          </view>
          <view class="mine-cell_content u-flex u-flex-1 u-border-bottom">
            <view class="mine-cell_content--label u-flex-1">{{$t('mine.my_project')}}</view>
            <text class="icon icon-arrow-r"></text>
          </view>
        </view>
      </template>
      <view class="mine-cell_item u-flex" @click="$goPage('/about')">
        <view class="mine-cell_icon">
          <image class="mine-cell_icon_image" src="@/static/images/mine/mine-about.png"></image>
        </view>
        <view class="mine-cell_content u-flex u-flex-1">
          <view class="mine-cell_content--label u-flex-1">{{$t('mine.about_idock')}}</view>
          <text class="icon icon-arrow-r"></text>
        </view>
      </view>
    </view>
    <view class="mine-logout" @click="logoutShow = true">{{$t('mine.logout')}}</view>
    <text class="icon icon-xiangzuo_o" v-if="showArrowLeft" style="color:#949C9E;font-size: 40rpx;position:fixed;left:20rpx;top:490rpx"></text>
    <text class="icon icon-arrow-r" style="color:#949C9E;font-size: 30rpx;position:fixed;right:20rpx;top:500rpx"></text>
    <u-modal v-model="logoutShow" :cancelText="$t('mine.btn_cancel')" :confirmText="$t('mine.btn_confirm')"
             :show-cancel-button="true" :show-title="false" :content="$t('mine.sure_to_logout')" @confirm="logout"></u-modal>
    <u-modal v-model="likeModalShow" title="" :confirm-text="$t('mine.btn_confirm')">
      <view class="slot-content">
        <image src="@/static/images/like-modal.jpg" style="height:300rpx"></image>
        <text class="getlike-text">{{ $t('mine.all_get')}}<text class="u-m-l-10 u-m-r-10">{{achievement.getLike}}</text>{{ $t('mine.num_like') }}</text>
      </view>
    </u-modal>
    <u-modal v-model="gradeModalShow" title="" :confirm-text="$t('mine.btn_confirm')">
      <view class="slot-content">
        <image :src="'../../static/images/grade/'+score+'.png'" style="margin: 0 auto;width:350rpx;height:300rpx;"></image>
      </view>
    </u-modal>
  </view>
  <!-- <button @click="sendMessage()">fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</button> -->
</template>

<script>
//极光推送
// let jpushModule = uni.requireNativePlugin("JG-JPush")
//import pageMixin from '@/utils/pageMixin';
//const jpushModule = uni.requireNativePlugin("JG-JPush")
import {
  TIM,
  TIMUploadPlugin,
  Aegis
} from '@/pages/TUIKit/debug/tim.js';
import pageMixin from '@/utils/tabBarMixin';
export default {
  mixins: [pageMixin],
  data() {
    return {
      userType: 2,
      score: 1,
      logoutShow: false,
      info: {},
      uname: '',
      avatar: '',
      achievement: {},
      followCount: 0,
      fansCount: 0,
      likeModalShow: false,
      gradeModalShow: false,
      showArrowLeft: false,   //nav栏是否显示左侧箭头
      message:{}
    }
  },
  onLoad() {
    this.$store.commit('checkUserLogin');
    this.userType = this.$store.state.vuex_user.type || 2
  },
  onShow() {
    if(JSON.stringify(this.$store.state.vuex_user) !== '{}') {
      this.$http.get('/client/user/account/info', {}).then(res => {
        this.uname = res.Nickname
        this.avatar = res.AvatarImg
        this.info = res
        this.getUserAchievement()
        this.getFansList()
        this.getFollowList()
      })
    }
  },
  components: {},
  computed: {
    // i18n() {
    // 	return this.$t('mine')
    // }
  },
  methods: {
    logout() {
      let data = uni.getStorageSync('user')
      uni.clearStorageSync();
      uni.setStorageSync('user',data)
      this.$store.dispatch('logout', this.vuex_user);
      this.loginOutTIM()
    },
    getUserAchievement() {
      this.$http.get('/client/user/account/achievement', { userid: this.info.Uid }).then(res=>{
        this.achievement = res
        this.score = res.level.substring(2,res.level.length)
      })
    },
    getFansList() {
      this.$http.get('/client/user/account/fans/list',{userId: this.info.Uid}).then(res=>{
        this.fansCount = res.count
      })
    },
    getFollowList() {
      this.$http.get('/client/user/account/follow/list',{userId: this.info.Uid}).then(res=>{
        this.followCount = res.count
      })
    },
    goPage() {
      uni.navigateTo({
        url: '/pages/article/index?type=mine'
      })
    },
    scrollNav(e) {
      if(e.detail.scrollLeft > 6) {
        this.showArrowLeft = true
      }else {
        this.showArrowLeft = false
      }
    },
    loginOutTIM() {
      // logOut TUIKit
      uni.$TUIKit.logout({}).then((res) => {
        console.log(res.data); // 登出成功
      }).catch(err => {
        console.log("报错拉。。。。。", err)
      });
    },
    /* 			sendMessage(){

            let message = uni.$TUIKit.createTextMessage({
              to: '178121874911301',
              conversationType: TIM.TYPES.CONV_C2C,
              // 消息优先级，用于群聊（v2.4.2起支持）。如果某个群的消息超过了频率限制，后台会优先下发高优先级的消息，详细请参考：https://cloud.tencent.com/document/product/269/3663#.E6.B6.88.E6.81.AF.E4.BC.98.E5.85.88.E7.BA.A7.E4.B8.8E.E9.A2.91.E7.8E.87.E6.8E.A7.E5.88.B6)
              // 支持的枚举值：TIM.TYPES.MSG_PRIORITY_HIGH, TIM.TYPES.MSG_PRIORITY_NORMAL（默认）, TIM.TYPES.MSG_PRIORITY_LOW, TIM.TYPES.MSG_PRIORITY_LOWEST
              // priority: TIM.TYPES.MSG_PRIORITY_NORMAL,
              payload: {
                text: 'testIIIIIIIIIIIIIIIIIIIIIIII'
              },
              // v2.20.0起支持C2C消息已读回执功能，如果您发消息需要已读回执，需购买旗舰版套餐，并且创建消息时将 needReadReceipt 设置为 true
              needReadReceipt: true
              // 消息自定义数据（云端保存，会发送到对端，程序卸载重装后还能拉取到，v2.10.2起支持）
              // cloudCustomData: 'your cloud custom data'
            });
            uni.$TUIKit.sendMessage(message,{
                offlinePushInfo: {
                   disablePush: false,
                      title: 'Test', // 离线推送标题
                      description: 'FFFFFFF', // 离线推送内容
                      androidOPPOChannelID: '',// 离线推送设置 OPPO 手机 8.0 系统及以上的渠道 ID
                      extension: JSON.stringify({
                          entity: { // entity 中的内容可自定义
                              nick: 'testIIIIIIIIIIIIIIIIIIIIIIII',
                              userID: '178121874911301',
                          }
                      })
                  }
            })
          }, */
  },

  onPullDownRefresh() {
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 1000);
  }
}
</script>

<style lang="scss" scoped>
.u-progress-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.u-progress-dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background-color: #fb9126;
}

.u-progress-info {
  font-size: 28rpx;
  padding-left: 16rpx;
  letter-spacing: 2rpx
}
/* #ifdef APP-PLUS */
.status_bar {
  height: var(--status-bar-height);
  width: 100%;
}

.top_view {
  height: var(--status-bar-height);
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 999;
}

/* #endif */
.pdl-46 {
  padding-left: 46rpx;
}

.mine {}

.mine-header {
  height: 450rpx;
  position: relative;
&_bg {
   height: 100%;
   width: 100%;
   position: absolute;
   left: -2rpx;
   top: -40rpx;
&--image {
   width: 100%;
   height: 530rpx;

 }

}

&_content {
   position: relative;

.header-content_top--name {
  height: 88rpx;
  padding: 0 24rpx;
  color: #fff;
  margin-bottom: 12rpx;

&__text {
   font-size: 34rpx;
 }

&__setting {
   width: 56rpx;
   height: 56rpx;
   border-radius: 56rpx;
   background-color: rgba(0,0,0,0.3);
   font-size: 34rpx;
   text-align: center;
   line-height:56rpx;
 }
}

.header-content_user {
  margin-top: 100rpx;
  display: flex;
  padding-left: 32rpx;

//	background-color: rgba(0,111,190,0.2);
&--avatar {
   margin-bottom: 20rpx;
 }

&--name {
   display: flex;
   flex-direction: column;
   color: #fff;
   width: 100%;


&__text {
   font-size: 45rpx;
   font-weight: 700;
   margin-right: 12rpx;
 }

.icon {
  font-size: 34rpx;
}
}
}
}
}
.mine-nav {
  width: 200%;
  display: flex;
  padding: 30rpx 0 20rpx;
  background-color: transparent;
.mine-nav-item {
  width: 12%;
  background-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
.num {
  font-size: 32rpx;
  font-weight: 700;
  color: #19a7ff;
}
.label {
  color: #a6a7a7;
  font-size: 28rpx;
}
}
}
.mine-cell_group {
  margin-bottom: 20rpx;
}

.mine-cell_item {
  height: 100rpx;
  background-color: #ffffff;

&:active {
   background-color: #f9f9f9;
 }

.mine-cell_icon {
  width: 98rpx;
  text-align: center;

.icon {
  font-size: 40rpx;
  color: #6CBBFF;
}
&_image {
   width: 48rpx;
   height: 48rpx;
   margin-left: 32rpx;
 }
}

.mine-cell_content {
  height: 100%;
  padding-right: 24rpx;

&--label {
   font-size: 30rpx;
   color: #353535;
 }

.icon {
  font-size: 24rpx;
  color: #949C9E;
}
}
}

.mine-logout {
  height: 100rpx;
  line-height: 100rpx;
  font-size: 30rpx;
  color: #777777;
  text-align: center;
  background-color: #fff;

&:active {
   background-color: #f9f9f9;
 }
}
.getlike-text {
  display: inline-block;
  width: 100%;
  font-size: 28rpx;
  margin-bottom: 30rpx;
  text-align: center;
}
</style>
